<template>
  <div class="login-container">
    <div v-show="showPageNum !=2" style="width: 100%;height: 50px;background-color: black;">
      <svg-icon icon-class="ico_m_menu" v-show="!(showPageNum == 1)" @click="showLoginOrRegist" style="font-size: 35px;color: #ffe140;float: right;margin-right: 20px;margin-top: 7px;" />
      <svg-icon icon-class="ico_m_exit" v-show="showPageNum == 1" @click="showPageNum = 0" style="font-size: 35px;color: #ffe140;float: right;margin-right: 20px;margin-top: 7px;" />
      <img src="@/assets/m_logo.png" style="height: 50px;margin-left: 10px;"/>
    </div>
    <div class="main-page-down" style="width: 100%;height: 100%;margin: 0;display: block;" v-show="showPageNum == 0">
      <div style="width: 100%;height: 100%;position: relative;">
        <el-image
          style="width: 100%;"
          :src="require('@/assets/img_home.jpg')"
          fit="fill"></el-image>
      </div>

      <div style="width: 100%;height: 360px;position: absolute;top: 122px;padding-left: 10%;">
        <h2 style="font-size: 24px;color: rgba(188,172,35,0.91);">
          Selamat Datang ke<br/>Portal EVO Oil
          <p style="color: #adadad;margin-top: 6px;font-size: 16px;">
            #kitamenangbersama
          </p>
        </h2>
        <h2 style="font-size: 24px;color: rgba(255,255,255,0.91);margin-top: 32px;">
          Rasai Perbezaan Pretasi<br/>Enjin Anda
          <p style="color: #adadad;margin-top: 6px;font-size: 16px;">
            Kunci Melawan Penuaan Enjin<br/>dengan Teknologi EVO Oil
          </p>
        </h2>
      </div>
    </div>
    <div v-show="showPageNum == 0" style="width: 100%;height: 120px;padding-left: 20px;padding-top: 30px;background-color: rgb(32, 36, 42);position: relative;">
      <el-image
        style="width: 100%;height: 100px;position:absolute;top: -100px;left: 0;"
        :src="require('@/assets/products.png')"
        fit="fill">
      </el-image>
      <h2 @click="showPageNum = 6" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Terma dan Syarat</h2>
      <h2 @click="showPageNum = 7" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Privasi</h2>
      <h2 @click="showPageNum = 8" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Penghantaran</h2>
      <h2 @click="showPageNum = 9" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Pengembalian</h2>
    </div>
    <div v-show="showPageNum == 0" style="width: 100%;height: 96px;padding-top: 20px;background-color: rgb(227,192,126);text-align: center;">
      <h2 style="font-size: 15px;line-height: 32px;">Customer Care Line: 603 2273 3082</h2>
      <h2 style="font-size: 15px;line-height: 32px;">Email: careline@evooil.com.my</h2>
    </div>
    <div class="company-info-div" v-show="showPageNum == 0">
      <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Name:</h2>
      <p style="font-size: 15px;line-height: 32px;">{{companyInfo.name}}</p>
      <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Business Reg No:</h2>
      <p style="font-size: 15px;line-height: 32px;">{{companyInfo.regNo}}</p>
      <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Address</h2>
      <p style="font-size: 15px;line-height: 32px;">{{companyInfo.addr}}</p>
    </div>
    <div v-show="showPageNum == 1" style="background-color: #2b2f3a;position: absolute;top: 50px;width: 66%;height: 90px;right: 0;">
      <ul style="width: 100%;height: 100%;list-style: none;line-height: 45px;">
        <li style="height: 50%;padding-left: 20%;color: rgb(129,138,136);" @click="showPageNum = 5">Log Masuk</li>
        <li style="height: 50%;padding-left: 20%;color: rgb(129,138,136);" @click="showPageNum = 2">Pendaftaran Dealer</li>
      </ul>
    </div>
    <div v-show="showPageNum == 2" style="width: 100%;height: 100%;background-color: #8c939d;position: absolute;">
      <div style="width: 94%;height: 600px;margin-left: 3%;margin-right: 3%;background-color: white;margin-top: 10%;text-align: center;padding: 20px 12px 0 12px;">
        <svg-icon icon-class="ico_m_exit" @click="showPageNum = 0" style="font-size: 35px;color: #ffe140;float: right;display: block;" />
        <h2 style="display: block;clear: both;line-height: 60px;">Pendaftaran Dealer</h2>
        <div style="width: 92%;margin-left: 4%;margin-right: 4%;text-align: left;">
          <img src="@/assets/img_dealer_registration_company.jpg" @click="showPageNum = 3" style="width: 100%;"/>
          <h2 style="font-size: 18px;">Syarikat</h2>
        </div>
        <div style="width: 92%;margin-left: 4%;margin-right: 4%;margin-top:20px;text-align: left;">
          <img src="@/assets/img_dealer_registration_individual.jpg" @click="showPageNum = 4" style="width: 100%;"/>
          <h2 style="font-size: 18px;">Individu</h2>
        </div>
      </div>
    </div>
    <div v-show="showPageNum == 3" style="width: 100%;position: relative;text-align: center;">
      <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
      <h2 style="margin-top: 36px;margin-bottom: 36px;position: relative;bottom: 138px;">Pendaftaran Dealer<br/>-Company</h2>
      <el-form
        style="text-align: left;position: relative;bottom: 120px;padding-left: 5%;"
        v-model="newDealerData"
        label-position="top"
        size="medium">
        <h2 class="center-title">Perincian Log Masuk</h2>
        <el-form-item label="Emel: " class="one-hang">
          <el-input v-model="newDealerData.loginEmail" placeholder="Emel" @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kata Laluan: ">
          <el-input v-model="newDealerData.registerPwd" type="password" placeholder="******"></el-input>
        </el-form-item>
        <el-form-item label="Pastikan Kata Laluan: ">
          <el-input v-model="repwd" type="password" placeholder="******"></el-input>
        </el-form-item>
        <h2 class="center-title">Perincian Pendaftaran</h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.dealerName" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Pendaftaran Syarikat: ">
          <el-input v-model="newDealerData.syarikatCode" placeholder="Nombor Pendaftaran Syarikat" @blur="checkCompanyRegNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Logo Syarikat: " style="height: 99px;position: relative;">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="upload"
            :limit="1"
            action="http://"
            accept=".jpg, .png"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="fileList"
            list-type="picture"
            :http-request="uploadFile"
            :auto-upload="false">
            <el-button v-show="!(fileList.length && fileList.length > 0)" slot="trigger" size="small" type="primary">Pilih</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="SSM: " class="four-hang" style="height: 99px;position: relative;">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="uploadSSM"
            :limit="1"
            action="http://"
            :on-change="handleChangeSSM"
            :on-remove="handleRemoveSSM"
            :on-exceed="handleExceedSSM"
            :file-list="fileListSSM"
            list-type="picture"
            :http-request="uploadFileSSM"
            :auto-upload="false">
            <el-button v-show="!(fileListSSM.length && fileListSSM.length > 0)" slot="trigger" size="small" type="primary">Pilih</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Jenis Syarikat: ">
          <el-select v-model="newDealerData.typeCompany" placeholder="Type">
            <el-option label="Berhad" :value="0"></el-option>
            <el-option label="Sdn Bhd" :value="1"></el-option>
            <el-option label="Partnership" :value="2"></el-option>
            <el-option label="Enterprise" :value="3"></el-option>
            <el-option label="Others" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Jenis Perniagaan: ">
          <el-input v-model="newDealerData.typeBusiness" placeholder="Type" @blur="checkBusinessType($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Emel Syarikat: ">
          <el-input v-model="newDealerData.emailAddress" placeholder="Emel" @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kod Dealer Utama: ">
          <el-input v-model="newDealerData.registCode" placeholder="Kod" @blur="checkMasterDealerCode($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kawasan: ">
          <el-select v-model="newDealerData.region" placeholder="Kawasan">
            <el-option label="Tengah" :value="0"></el-option>
            <el-option label="Timur" :value="1"></el-option>
            <el-option label="Barat Malaysia" :value="2"></el-option>
            <el-option label="Utara" :value="3"></el-option>
            <el-option label="Selatan" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Nyatakan secara ringkas sebab-sebab anda/syarikat anda ingin menjadi penjual EVO OIL." class="one-hang">
          <el-input v-model="unlessWord" placeholder="reason"></el-input>
        </el-form-item>
        <h2 class="center-title">Infomasi Bil</h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.shopAddr.name" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.shopAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: ">
          <el-input v-model="newDealerData.shopAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: ">
          <el-input v-model="newDealerData.shopAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: ">
          <el-input v-model="newDealerData.shopAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: ">
          <el-input v-model="newDealerData.shopAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="Negara: ">
          <el-select v-model="newDealerData.shopAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negari: ">
          <el-select v-model="newDealerData.shopAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :label="item.en" :value="item.en" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <h2 class="center-title">
          Infomasi Penghantaran
          <el-checkbox
            label="Infomasi Bil mengikut Infomasi Penghantaran"
            v-model="shopAddrMATCHbillingAddr"
            @change="changeMatch"
            name="type"></el-checkbox>
        </h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.billingAddr.name" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.billingAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: ">
          <el-input v-model="newDealerData.billingAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: ">
          <el-input v-model="newDealerData.billingAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: ">
          <el-input v-model="newDealerData.billingAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: ">
          <el-input v-model="newDealerData.billingAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="Negara: ">
          <el-select v-model="newDealerData.billingAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Negari: ">
          <el-select v-model="newDealerData.billingAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :label="item.en" :value="item.en" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox
          style="font-size: 24px;margin: 20px 0 0 0;color: black;"
          v-model="ismustConfirm"
          name="type"><span>Untuk menjadi Dealer penjualan minyak pelincir Evo Oil, anda adalah tertakluk kepada terma-terma dan syarat yang ditetapkan oleh KOP Mantap Berhad.</span></el-checkbox>
        <p>Dengan ini anda mengaku bahawa maklumat yang diisikan di dalam Borang ini adalah benar dan tepat.</p>
        <div>
          <el-button type="primary" @click="comRegist(0)" :disabled="!ismustConfirm">Daftar</el-button>
        </div>
      </el-form>
    </div>
    <div v-show="showPageNum == 4" style="width: 100%;position: relative;text-align: center;">
      <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
      <h2 style="margin-top: 36px;margin-bottom: 36px;position: relative;bottom: 138px;">Pendaftaran Dealer<br/>-Individual</h2>
      <el-form
        style="text-align: left;position: relative;bottom: 120px;padding-left: 5%;"
        v-model="newDealerData"
        label-position="top"
        size="medium">
        <h2>Perincian Log Masuk</h2>
        <el-form-item label="Emel: ">
          <el-input v-model="newDealerData.loginEmail" placeholder="Emel" @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kata Laluan: ">
          <el-input type="password" v-model="newDealerData.registerPwd" placeholder="******"></el-input>
        </el-form-item>
        <el-form-item label="Pastikan Kata Laluan: ">
          <el-input type="password" v-model="repwd" placeholder="******"></el-input>
        </el-form-item>
        <h2 class="big-title">Perincian Pendaftaran</h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.dealerName" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor I/C: ">
          <el-input v-model="newDealerData.idCardNumber" placeholder="Nombor I/C" @blur="checkIC($event.target.value)" maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="Nombor I/C: " style="height: 99px;position: relative;">
          <el-upload
            ref="uploadIC"
            :limit="1"
            action="http://"
            accept=".jpg, .png"
            :on-change="handleChangeIC"
            :on-remove="handleRemoveIC"
            :on-exceed="handleExceedIC"
            :file-list="fileListIC"
            list-type="picture"
            :http-request="uploadFileIC"
            :auto-upload="false">
            <el-button v-show="!(fileListIC.length && fileListIC.length > 0)" slot="trigger" size="small" type="primary">Pilih</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="Utility Bill: " style="height: 99px;position: relative;">
          <el-upload
            style="display: inline-block;width: 188px;height: 32px;"
            ref="uploadUB"
            multiple
            :limit="1"
            action="http://"
            :on-change="handleChangeUB"
            :on-remove="handleRemoveUB"
            :on-exceed="handleExceedUB"
            :file-list="fileListUB"
            list-type="picture"
            :http-request="uploadFileUB"
            :auto-upload="false">
            <el-button v-show="!(fileListUB.length && fileListUB.length > 0)" slot="trigger" size="small" type="primary">Pilih</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kod Dealer Utama: ">
          <el-input v-model="newDealerData.registCode" placeholder="Kod" @blur="checkMasterDealerCode($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Nyatakan secara ringkas sebab-sebab anda ingin menjadi penjual EVO OIL.">
          <el-input v-model="unlessWord" placeholder="... ..."></el-input>
        </el-form-item>
        <h2 class="big-title">Infomasi Bil</h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.shopAddr.name" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.shopAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: ">
          <el-input v-model="newDealerData.shopAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: ">
          <el-input v-model="newDealerData.shopAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: ">
          <el-input v-model="newDealerData.shopAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: ">
          <el-input v-model="newDealerData.shopAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="Negara: ">
          <el-select v-model="newDealerData.shopAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Kawasan: ">
          <el-select v-model="newDealerData.shopAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :label="item.en" :value="item.en" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <h2 class="big-title" style="margin-top: 20px;">
          Infomasi Penghantaran
          <el-checkbox
            label="Infomasi Penghantaran same with Infomasi Bil"
            v-model="shopAddrMATCHbillingAddr"
            @change="changeMatch"
            name="type"></el-checkbox>
        </h2>
        <el-form-item label="Nama: ">
          <el-input v-model="newDealerData.billingAddr.name" placeholder="Nama" @blur="checkName($event.target.value)" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Nombor Telefon: ">
          <el-input v-model="newDealerData.billingAddr.phoneNumber" placeholder="Nombor Telefon" @blur="checkPhoneNo($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 1: ">
          <el-input v-model="newDealerData.billingAddr.streetAddress" placeholder="Alamat 1" @blur="checkAddress($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Alamat 2: ">
          <el-input v-model="newDealerData.billingAddr.regionalAddress" placeholder="Alamat 2" @blur="checkAddress2($event.target.value)" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="Bandar: ">
          <el-input v-model="newDealerData.billingAddr.city" placeholder="Bandar"></el-input>
        </el-form-item>
        <el-form-item label="Poskod: ">
          <el-input v-model="newDealerData.billingAddr.postCode" placeholder="Poskod" @blur="checkPostCode($event.target.value)" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="Negara: ">
          <el-select v-model="newDealerData.billingAddr.country" placeholder="Negara">
            <el-option label="Malaysia" value="Malaysia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Kawasan: ">
          <el-select v-model="newDealerData.billingAddr.region" placeholder="Negeri">
            <el-option v-for="(item, index) in $regionList" :key="index" :label="item.en" :value="item.en"></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox
          label="Untuk menjadi Dealer penjualan minyak pelincir Evo Oil, anda adalah tertakluk kepada terma-terma dan syarat yang ditetapkan oleh KOP Mantap Berhad."
          style="font-size: 24px;margin: 20px 0 0 0;color: black;"
          v-model="ismustConfirm"
          name="type"></el-checkbox>
        <p style="font-size: 14px;margin-left: 24px">Dengan ini anda mengaku bahawa maklumat yang diisikan di dalam Borang ini adalah benar dan tepat.</p>
        <div>
          <el-button type="primary" :disabled="!ismustConfirm" @click="comRegist(1)">Daftar</el-button>
        </div>
      </el-form>
    </div>
    <div v-show="showPageNum == 5" style="width: 100%;height: 100%;background-color: #8c939d;position: absolute;">
      <div style="width: 94%;margin-left: 3%;margin-right: 3%;background-color: white;margin-top: 10%;text-align: left;padding: 20px 12px 60px 12px;">
        <svg-icon icon-class="ico_m_exit" @click="showPageNum = 0" style="font-size: 35px;color: #ffe140;float: right;display: block;"></svg-icon>
        <img src="@/assets/img_login_m.jpg" style="width: 100%;"/>
        <h2 style="display: block;clear: both;line-height: 60px;">Log Masuk</h2>
        <strong>Dealer Baru?<span style="margin-left: 10px;color: #ffe140;" @click="showPageNum = 2">Dafter sebagai Dealer</span></strong>
        <el-form :model="loginData" label-position="left" style="margin-top: 30px;">
          <el-form-item>
            <el-input
              v-model="loginData.acc"
              placeholder="Nama Pengguna"
              name="username"
              type="text"
              tabindex="1"
              @input="accountTrim"
              auto-complete="on"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="loginData.pwd"
              type="password"
              placeholder="Kata Laluan"
              auto-complete="on"
              show-password
              @keyup.enter.native="handleLogin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked">Keep me sign in</el-checkbox>
            <span style="float: right;" @click="showSendEmailCode = true">Lupa Kata Laluan?</span>
          </el-form-item>
          <el-button
            round
            :loading="loading"
            type="warning"
            size="medium"
            style="width:120px;"
            @click.native.prevent="handleLogin">Log Masuk
          </el-button>
        </el-form>
      </div>
    </div>
    <div v-show="showPageNum == 6" style="width: 100%;">
      <div style="position: relative;text-align: center;">
        <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
      </div>
      <h2 style="position: relative;bottom: 100px;text-align: center;">Terma dan Syarat</h2>
      <div style="text-align: left;">
        <h2 style="font-size: 16px;line-height: 34px;">1. IMPORTANT NOTICE</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.1</td><td class="list-content"> Please read these terms and conditions of use and services subscribing (“Terms”) including the Privacy Policy carefully before accessing https://www.evooil.com.my/ (“Site”) as User (“User”) for any service available on and through the Site (“Services”).<br></td></tr>
          <tr><td class="list-bullet">1.2</td><td class="list-content"> BY ACCESSING OR USING THE SITE OR SERVICES, YOU ARE AGREEING TO BE BOUND BY OUR TERMS, all applicable laws and regulations, and agree that you are responsible to comply with the same.<br></td></tr>
          <tr><td class="list-bullet">1.3</td><td class="list-content"> We are TRANS PARAMOUNT SDN BHD of Company No: 200601006895 (726644-U) of 65, Jalan 14/29, Seksyen 14, 46100 Petaling Jaya, Selangor.<br></td></tr>
          <tr><td class="list-bullet">1.4</td><td class="list-content"> Throughout the Site, we refer to ourselves and/or our partners, associates, affiliates, subsidiaries as "we" or "us" or "our" and we refer to you as “you”, “your”, “User”.<br></td></tr>
          <tr><td class="list-bullet">1.5</td><td class="list-content"> We reserve the right, at our sole discretion, to update, remove, suspend, add on, modify, change or replace any part of these Terms by posting updates and/or changes to our Site. It is your sole responsibility to check these Terms regularly for changes.<br></td></tr>
          <tr><td class="list-bullet">1.6</td><td class="list-content"> If you DO NOT AGREE TO THE TERMS/amended Terms, PLEASE DO NOT ACCESS OR USE OUR SITE AND SERVICES. Your continued use of or access to our Site and Services Terms constitutes acceptance of those Terms/amended Terms.<br></td></tr>
          <tr><td class="list-bullet">1.7</td><td class="list-content"> We hereby grant you limited, non-transferrable and revocable license to access the Site and use the Services for the purpose of conducting purchase transactions through the Services. You may access the Site only through our applications, standard web and mobile applications and similar consumer applications, but not with any scraping, data mining, robots or similar data gathering or extraction methods, downloading (other than page caching) any part of the Site.<br></td></tr>
          <tr><td class="list-bullet">1.8</td><td class="list-content"> The Site and the Services are directed solely at those who access the Site or Services from Malaysia. We make no warranty or representation that the Site or Services are available or otherwise suitable for use outside of the Malaysia. If you choose to access the Site or Services from locations out of Malaysia, you are acted on your own initiative and are responsible for the consequences and for compliance with all applicable laws.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">2. GENERAL CONDITIONS FOR THE USE OF THE SITE AND/OR SERVICES</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">2.1</td> <td class="list-content">You may not create or use any account with us for any person or entity other than yourself except if you are authorized to do so for and on behalf of such person or entity.</td></tr>
          <tr><td class="list-bullet">2.2</td> <td class="list-content">You are responsible for safeguarding your account details, username and password and not to share your account details with others failure which we are not responsible and liable for any losses and damages incurred or suffered by you in connection with your failure or negligence hereof.</td></tr>
          <tr><td class="list-bullet">2.3</td> <td class="list-content">If we reasonably believe or suspect of any:<br>
            <table>
            <tr><td class="list-bullet">(a)</td> <td class="list-content">unauthorized access into an account;</td></tr>
            <tr><td class="list-bullet">(b)</td> <td class="list-content">use the Services for the benefit of any third party or any manner not permitted by the licenses granted herein;</td></tr>
            <tr><td class="list-bullet">(c)</td> <td class="list-content">use the Services in a manner that is fraudulent, unconscionable, false, misleading or deceptive;</td></tr>
            <tr><td class="list-bullet">(d)</td> <td class="list-content">access into the Site by any unqualified party;</td></tr>
            <tr><td class="list-bullet">(e)</td> <td class="list-content">access for the purpose of harvesting and collect information of other User;</td></tr>
            <tr><td class="list-bullet">(f)</td> <td class="list-content">any part of the Site being cached in proxy servers and accessed by a third party who have not registered as User;</td></tr>
            <tr><td class="list-bullet">(g)</td> <td class="list-content">access through a single account and password being made available to multiple users on a network;</td></tr>
            <tr><td class="list-bullet">(h)</td> <td class="list-content">attempt to decompile, reverse engineer, disassemble or hack the Services (or any portion thereof), or to defeat or overcome any encryption technology or security measures implemented by us with respect to the Services and/or data transmitted, processed or stored through the Site;</td></tr>
            <tr><td class="list-bullet">(i)</td> <td class="list-content">interfere with, manipulate or disrupt the Services or servers or networks connected to the Services or any other User's use and enjoyment of the Services, or disobey any requirements, procedures, policies or regulations of networks connected to the Site; or</td></tr>
            <tr><td class="list-bullet">(j)</td> <td class="list-content">misused of an account in whatsoever manner which we have reasonable grounds that such misuse could directly or indirectly involve in any actions that would against any laws;</td></tr>
            </table><br>
          We reserve the right, at our sole discretion, to immediately refuse to offer the Services or deny your access to the Site.</td></tr>
          <tr><td class="list-bullet">2.4</td> <td class="list-content">You shall not use the Site and/or Services for any illegal or unlawful purpose.You shall not attempt to violate any security measures or the Site or bypass, circumvent, avoid, remove, deactivate, descramble, decrypt or otherwise impair any measures installed or used by us.</td></tr>
          <tr><td class="list-bullet">2.5</td> <td class="list-content">You shall not use any software, program, instruments or devices to or attempt to interfere with the operation of the Site.</td></tr>
          <tr><td class="list-bullet">2.6</td> <td class="list-content">You shall not transmit including but not limited to, any worms, viruses and/or any code of a destructive nature through the Site or an account.</td></tr>
          <tr><td class="list-bullet">2.7</td> <td class="list-content">If you are aware of any actual or suspected unauthorized use(s) of your account, loss, theft, or unauthorized disclosure of your account details or the Site, please notify us immediately at: newsletter@transparamount.com</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">3. ACCURACY, COMPLETENESS AND TIMELINESS OF INFORMATION</h2>
        <p style="font-size: 16px;">
          <table>
            <tr><td class="list-bullet">3.1</td> <td class="list-content">The Site may contain historical information. Historical information may not be current and is provided for your reference only.</td></tr>
            <tr><td class="list-bullet">3.2</td> <td class="list-content">Occasionally, the Displayed Info or the information of the Services may contain typographical errors, inaccuracies or omissions that may relate to product descriptions, pricing, promotions, offers, product shipping charges, transit times and availability. We are not responsible for the updates, accuracy or completeness of information of the Site.</td></tr>
            <tr><td class="list-bullet">3.3</td> <td class="list-content">We reserve the right to remove, modify, update or change any contents of the Services and Site and/or the Displayed Info, or to correct any errors, inaccuracies or omissions (“Modification”) at any time without prior notice to you, but we have no obligation to update, amend or clarify information of the Site or Services, except as required by law. You understand that we shall not be held liable or responsible for any consequences of the aforesaid Modification and it is your responsibility to monitor any changes to our Site. No specified update or refresh date applied in the Site, Services or on any related website should be taken to indicate that all information in the Site or Services has been modified or updated.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">4. INTELLECTUAL PROPERTY AND LIMITATIONS ON USE</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">4.1</td> <td class="list-content">You shall not use our Intellectual Property or the 3rd Party Property without our express written permission. Registration as User will not in any event grants you any right to use our Intellectual Property or the 3rd Party Property. Any unauthorized use or infringement of our Intellectual Property or the 3rd Party Property rights may subject you to civil and/or criminal liabilities.</td></tr>
          <tr><td class="list-bullet">4.2</td> <td class="list-content">For the avoidance of doubt, the term “use of our Intellectual Property or the 3rd Party Property” in the Terms shall means reproduced, distributed, copied, modified, distributed, published, downloaded, displayed, posted, performed or transmitted in any form or by any means, sold, rented, re-sold, licensed or sub- licensed, used to create derivative works, use for commercial purposes any of the materials, information or content on the Site, decompile, reverse engineer, disassemble or otherwise reduce any part of any of our software (including the Site) to human-readable form or in any way exploited or caused the occurrence of the above without the prior express written permission of our or 3rd Party Property proprietor</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">5. LINKS WITH OTHER SITES</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">5.1</td> <td class="list-content">The Site or the Services may contain any links or pointers to other websites but you should not infer or assume that we operate, controls, or is otherwise connected with these other websites. We are not responsible for the content or practices of any other website that links to the Site and you are solely subject to the terms and conditions (including privacy policies) of these websites.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">6. DISCLAIMER & RESERVATION</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">6.1</td> <td class="list-content">We shall not be held liable or responsible, howsoever and whatsoever, for any interruption or delay, to access the Site or Services) due to any cause beyond our reasonable control, wherever arising and not due to our negligence and which cannot be overcome by the exercise of due diligence, including, but not limited to, labor disturbances, lockouts or lockdown and other industrial disputes, riots, fires, earthquakes, floods, storms, lightning, epidemics, war, disorders, hostilities, expropriation or confiscation of properties, interference by civil, enforcement of any administration orders or laws of the authority or military authorities or acts of God.</td></tr>
          <tr><td class="list-bullet">6.2</td> <td class="list-content">We make no representation or warranty with respect to any results obtainable through our Services and/or Sites or any implied/express warranties that our Services and/or Sites are fit for merchantable quality or a particular purpose, including those of or fitness for a particular purpose.</td></tr>
          <tr><td class="list-bullet">6.3</td> <td class="list-content">We do not guarantee, represent or warrant that your use of our Site and Services will be uninterrupted, timely, secure or error-free. You agree that your use of, or inability to use, our Site and/or Services is at your own risk and we may from time to time remove, suspend or cease to operate the Site and Services or any part of it for indefinite periods of time without notice to you.</td></tr>
          <tr><td class="list-bullet">6.4</td> <td class="list-content">The Displayed Info is provided is provided on “as is” and 'as available' basis for general information only and should not constitute as an advice or constitute as an open offer capable of forming the basis of a contract or be relied upon or used as the sole basis for making decisions without seeking proper advice. Any reliance on the material on this Site is at your own risk.</td></tr>
          <tr><td class="list-bullet">6.5</td> <td class="list-content">We may at times include statements, opinions or views of third parties or make reference to certain provider, product or service by its name, such inclusion or references shall not constitute as an endorsement by us.</td></tr>
          <tr><td class="list-bullet">6.6</td> <td class="list-content">To the extent permitted by law, we shall not be responsible or liable, whatsoever and howsoever, for any injury, losses, loss of income, loss of profit, loss of goodwill, damages, costs and expenses or otherwise, arising from your use</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">7. INDEMNIFICATION</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">7.1</td> <td class="list-content">You agree to indemnify, defend and hold us harmless from any claim or demand, loss, damages, costs and expenses suffered and/or incurred by any third party due to or arising out of your breach of the Terms, our Privacy Policy or your activities through or associate with our Services or Site.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">8. SEVERABILITY</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">8.1</td> <td class="list-content">If it shall be determined or declared that any provision of the Terms is invalid or unenforceable, the remaining provisions of the Terms shall not be affected.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">9. WAIVER</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">9.1</td> <td class="list-content">The forbearance, indulgence, delay or failure by us in enforcing any of the terms and condition of the Terms or any of the extension of time granted by us to you in complying any of the terms hereof shall not prejudice or restrict the exercise of any part of our rights and remedies available by law.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">10. TERMINATION OR SUSPENSION OF PROVISION OF SERVICES</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">10.1</td> <td class="list-content">Any breach or attempt to breach of any of the Terms by you will result in an immediate termination or suspension of the Services without further reference to you. We reserve the right to prevent you from using the Site and the Services (or any part of them) at any time and for any reason. We shall not be liable to you or any third-party related to you for the aforesaid suspension or termination of the Service and/or the denial of your access to the Site.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">11. ENTIRE AGREEMENT</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">11.1</td> <td class="list-content">The Terms and any policies or operating rules posted by us on this site or in respect to the Service from time to time constitutes the entire agreement and understanding between you and us and supersedes any prior or contemporaneous agreements, communications and proposals, whether oral or written, between you and us (including, but not limited to, any prior versions of the Terms).</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">12. GOVERNING LAW</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">12.1</td> <td class="list-content">The Terms shall be governed by and construed in accordance with the laws of Malaysia and any disputes will be resolved exclusively by the Courts of Malaysia.</td></tr>
          <tr><td class="list-bullet">12.2</td> <td class="list-content">In event of any disputes arises, we encourage parties to communicate with each other to first attempt to resolve the matter amicable through mutual discussion and consensus of which we shall use reasonable commercial efforts to achieve the same. Until and unless such dispute is unable to be reasonable resolve, parties shall refer the matter exclusively to the relevant authority tribunals or courts of competent jurisdiction in Malaysia.</td></tr>
          </table>
        </p>
        <div style="width: 100%;height: 120px;padding-left: 20px;padding-top: 30px;background-color: rgb(32, 36, 42);position: relative;">
          <h2 @click="showPageNum = 6" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Terma dan Syarat</h2>
          <h2 @click="showPageNum = 7" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Privasi</h2>
          <h2 @click="showPageNum = 8" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Penghantaran</h2>
          <h2 @click="showPageNum = 9" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Pengembalian</h2>
        </div>
        <div style="width: 100%;height: 96px;padding-top: 20px;background-color: rgb(227,192,126);text-align: center;">
          <h2 style="font-size: 15px;line-height: 32px;">Customer Care Line: 603 2273 3082</h2>
          <h2 style="font-size: 15px;line-height: 32px;">Email: careline@evooil.com.my</h2>
        </div>
        <div class="company-info-div">
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Name:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.name}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Business Reg No:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.regNo}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Address</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.addr}}</p>
        </div>
      </div>
    </div>
    <div v-show="showPageNum == 7" style="width: 100%">
     <div style="position: relative;text-align: center;">
        <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
      </div>
      <h2 style="line-height: 88px;text-align: center;position: relative;bottom: 100px;">Polisi Privasi</h2>
      <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 0 1% 50px 2%;">
        <h2 style="font-size: 16px;line-height: 34px;">1. INTRODUCTION</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.1</td><td class="list-content">TRANS PARAMOUNT SDN BHD of Company No: 200601006895 (726644-U) respects your privacy and this privacy policy (“Privacy Policy”) explain our views and practices in treating your personal data. This Privacy Policy shall assist you to understand how we collect, use, disclose, safekeep and process your personal data with us. </td></tr>
          <tr><td class="list-bullet">1.2</td><td class="list-content"> Throughout our website (“Site”), we refer to ourselves and/or our partners, associates, affiliates, subsidiaries as "we" or "us" or "our" and we refer to you as “you”, “your”, or “User”. All functions and services of the Site shall be collectively referred to as the “Services”.</td></tr>
          <tr><td class="list-bullet">1.3</td><td class="list-content"> Personal data shall mean data and information, whether accurate or not, that could identify an individual.</td></tr>
          <tr><td class="list-bullet">1.4</td><td class="list-content"> PLEASE READ THIS PRIVACY POLICY CAREFULLY as by subscribing, using, registering the Services and/or accessing or visiting the Site, YOU HAVE AGREED AND ACKNOWLEDGED that you have reasonably read and understood the terms and conditions of this Privacy Policy which YOU HAVE FURTHER CONSENTED TO US to collect, process, disclose, safekeep, use and process your personal data.</td></tr>
          <tr><td class="list-bullet">1.5</td><td class="list-content"> IF YOU DO NOT AGREE to this Privacy Policy and/or your personal data to be collected, processed, disclosed, safekept, used and processed by us, PLEASE DO NOT USE THE SERVICES OR ACCESS THE SITE.</td></tr>
          <tr><td class="list-bullet">1.6</td><td class="list-content"> This Privacy Policy shall apply together with our other policies, contractual terms and conditions which are related to our services at the Site and it is not designed to override the same.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">1A. INFORMATION WE COLLECT AND WHEN WE COLLECT</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.A1</td><td class="list-content">We collect information which may not limited to the followings:<br>
            <table>
              <tr><td class="list-bullet">i)</td> <td class="list-content">Basic identity and communication information such as name, national registration /passport information, contact details, date of birth, gender, email address, correspondence and billing address;</td></tr>
              <tr><td class="list-bullet">ii)</td> <td class="list-content">Usage and transaction information such as Site browsing and access records, search preference and records, internet protocol (IP) address, type of your device using the Services or accessing the Site, your device location and transaction and payment records; and</td></tr>
              <tr><td class="list-bullet">iii)</td> <td class="list-content">Such other information that you may have submitted to us while using or applying the Services.</td></tr>
            </table>
          </td></tr>
          <tr><td class="list-bullet">1.A2</td><td class="list-content"> These personal data may be collected from various sources including but not limited to the followings when:<br>
            <table>
              <tr><td class="list-bullet">a.</td> <td class="list-content">you use, register and/or subscribe to our Services;</td></tr>
              <tr><td class="list-bullet">b.</td> <td class="list-content">you browse and/or access to our Site;</td></tr>
              <tr><td class="list-bullet">c.</td> <td class="list-content">you interact with us or submit feedback or complaint through the Site, email, tele-communication, electronic messages and your participation of any of our social media, campaigns, competitions, research or survey; and</td></tr>
              <tr><td class="list-bullet">d.</td> <td class="list-content">you performed any transaction through the Site.</td></tr>
            </table><br>
            For the avoidance of doubt, the above list is not intended to be exhaustive and may be added from time to time as these are common instances as of how your personal data be collected.
          </td></tr>
          <tr><td class="list-bullet">1.A3</td><td class="list-content"> Personal data may also be collected through information legally obtained by us from third parties or public domain while we performing certain degree of identity verification and due diligence.</td></tr>
          <tr><td class="list-bullet">1.A4</td><td class="list-content"> This Privacy Policy shall be read and construed according to the Malaysia Personal Data Protection Act 2010 (“the Act”) and any reference to the term “Personal Data” shall have the meaning as ascribed in the Act apart from the above definitions.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">2. USE OF YOUR INFORMATION - PURPOSE</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">2.1</td> <td class="list-content">We may collect, retain, process and use your personal data for various purposes (“Purposes”) as follows:<br>
            <table>
              <tr><td class="list-bullet">(i)</td> <td class="list-content">provide our Services to you;</td></tr>
              <tr><td class="list-bullet">(ii)</td> <td class="list-content">check, verify and process your application with any of our Services;</td></tr>
              <tr><td class="list-bullet">(iii)</td> <td class="list-content">perform any background verification and to carry out any due diligence or screening activities in compliance with any applicable laws/authority requirements;</td></tr>
              <tr><td class="list-bullet">(iv)</td> <td class="list-content">enable your access into the Site and/or Services;</td></tr>
              <tr><td class="list-bullet">(v)</td> <td class="list-content">provide and communicate with you for any updates and ongoing events, promotion, campaign, competition or any other advertising and promotional activities of similar kind (collectively referred to as “Promotions”) of the Site and/or Services;</td></tr>
              <tr><td class="list-bullet">(vi)</td> <td class="list-content">inform any important changes of the contents and/or technical updates or modifications of the Site and/or the Services;</td></tr>
              <tr><td class="list-bullet">(vii)</td> <td class="list-content">create, manage and administrate our database, information technology system for the operation of the Site and/or Services;</td></tr>
              <tr><td class="list-bullet">(viii)</td> <td class="list-content">discharge our contractual obligation with you;</td></tr>
              <tr><td class="list-bullet">(ix)</td> <td class="list-content">resolve any of your feedbacks, concerns and/or complaints</td></tr>
              <tr><td class="list-bullet">(x)</td> <td class="list-content">conduct survey, analysis and development to improve our Site and/or our Services without limitation to historical and statistical record keeping purposes;</td></tr>
              <tr><td class="list-bullet">(xi)</td> <td class="list-content">to process, complete and proceed with your transaction at the Site;</td></tr>
              <tr><td class="list-bullet">(xii)</td> <td class="list-content">to enforce any of our terms and conditions and any applicable agreement with you; and</td></tr>
              <tr><td class="list-bullet">(xiii)</td> <td class="list-content">any other purpose that is incidental or ancillary or in furtherance to our daily business operation.</td></tr>
            </table>
          </td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">3. SHARING OF INFORMATION - DISCLOSURE</h2>
        <p style="font-size: 16px;">
          <table>
            <tr><td class="list-bullet">3.1</td> <td class="list-content">We may disclose your personal data to amongst others, the following parties for the Purposes:<br>
              <table>
                <tr><td class="list-bullet">(i)</td> <td class="list-content">Our parent company, subsidiaries, affiliates and associated companies (whichever is applicable);</td></tr>
              <tr><td class="list-bullet">(ii)</td> <td class="list-content">Our licensees, co-organizers of events, business alliances, partners, agents and service providers;</td></tr>
              <tr><td class="list-bullet">(iii)</td> <td class="list-content">any relevant authorities or bodies;</td></tr>
              <tr><td class="list-bullet">(iv)</td> <td class="list-content">professionals for legal compliance purposes;</td></tr>
              <tr><td class="list-bullet">(v)</td> <td class="list-content">to such person pursuant to the requirements of any law, if such action is necessary to
                <table>
                  <tr><td class="list-bullet">a.</td> <td class="list-content">comply with the requirement of any law enforcement agency, court order or legal process; or</td></tr>
                  <tr><td class="list-bullet">b.</td> <td class="list-content">to protect and defend our rights or property.</td></tr>
                </table>
              </td></tr>
              <tr><td class="list-bullet">(vi)</td> <td class="list-content">any other person, entity and/or organizations which is permitted by laws to receive these personal data for performing the Purposes from time to time.</td></tr>
              </table>
            </td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">4. RETENTION AND SECURITY</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">4.1</td> <td class="list-content">We take reasonable pre-cautions, maintain important safeguards and measurements with reference to best industry practices to ensure the security of your personal data with us. Notwithstanding the foregoing, while we strive to protect your personal data, we cannot fully guarantee your personal data will not be misuse, unauthorized or accidental accessed, disclosed, altered or destroyed by any other third parties due to event beyond our reasonable control.</td></tr>
          <tr><td class="list-bullet">4.2</td> <td class="list-content">Your personal data will be retained by us, to the extent permitted by laws, for a period deems fit and necessary by us for the fulfillment of the Purposes or to comply with any legal requirements or statutory obligations. We cease to process your personal data, and to take all necessary action to permanently delete and destroy your personal data within a reasonable period.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">5. YOUR RIGHTS TO ACCESS AND MODIFICATION OF PERSONAL DATA</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">5.1</td> <td class="list-content">We takes all reasonable steps to ensure that your personal data is accurate, complete, not misleading and kept up-to-date, consistent with the Purposes for which the information was collected therefore we may request you to update your Personal Data from time to time.</td></tr>
          <tr><td class="list-bullet">5.1</td> <td class="list-content">You may also request in writing to us to access, correct and/or update your Personal Data via email at newsletter@transparamount.com or by ordinary/express/registered post to:<br><br>
            <span>Attention to:</span><br>
            <span class="highlighted">Officer in charge of website information update</span><br>
            <span class="highlighted">Trans Paramount Sdn Bhd</span><br>
            <span class="highlighted">Company No: 200601006895 (726644-U)</span><br>
            <span>No 65, Jalan 14/29, Seksyen 14, 46100 Petaling Jaya, Selangor</span><br>
          </td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">6. IMPORTANT NOTICE</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">6.1</td> <td class="list-content">As part of our commitment in respecting your privacy, we encourage you to inform us of your decision on the using and sharing and processing your personal data with us. Until and unless you inform us otherwise, you are deemed to have consented and authorized us to collect, retain, process, disclose and destroy your personal data.</td></tr>
          <tr><td class="list-bullet">6.2</td> <td class="list-content">You are required to submit personal data which is true, correct and not misleading. You are responsible to ensure the information given is up to-date.</td></tr>
          <tr><td class="list-bullet">6.3</td> <td class="list-content">We reserve the right to amend this Privacy Policy any time without prior notice but we shall use our best endeavour to post the updated Privacy Policy on the Site once available. You are responsible for regularly reviewing this Privacy Policy. Continued use of our Sites and Services constitute your consent to such changes.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">7. COOKIES</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">7.1</td> <td class="list-content">To improve the performance of the Site, we may use "cookies" or similar electronic tools to collect information and to study and understand User browsing habits and behavior, frequency, web activities statistics. Unless you voluntarily identify yourself, we are unable to identify you. The Site may also automatically collect limited information about your connectivity with us, including your IP address, when you visit or access the Site and/or Services. You may refuse the use of cookies by selecting the appropriate settings on your browser. However, please note that if you do this you may not be able to use the full functionality of our Site or the Services.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">8. QUESTIONS AND CONTACT INFORMATION</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">8.1</td> <td class="list-content">If you have any queries or concern of your Personal Data with us, please email to us at newsletter@transparamount.com and we will try to resolve the issue as soon as practical.</td></tr>
          </table>
        </p>
      </div>
      <div style="width: 100%;height: 120px;padding-left: 20px;padding-top: 30px;background-color: rgb(32, 36, 42);position: relative;">
          <h2 @click="showPageNum = 6" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Terma dan Syarat</h2>
          <h2 @click="showPageNum = 7" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Privasi</h2>
          <h2 @click="showPageNum = 8" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Penghantaran</h2>
          <h2 @click="showPageNum = 9" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Pengembalian</h2>
        </div>
        <div style="width: 100%;height: 96px;padding-top: 20px;background-color: rgb(227,192,126);text-align: center;">
          <h2 style="font-size: 15px;line-height: 32px;">Customer Care Line: 603 2273 3082</h2>
          <h2 style="font-size: 15px;line-height: 32px;">Email: careline@evooil.com.my</h2>
        </div>
        <div class="company-info-div">
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Name:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.name}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Business Reg No:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.regNo}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Address</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.addr}}</p>
        </div>
    </div>
    <div v-show="showPageNum == 8" style="width: 100%">
     <div style="position: relative;text-align: center;">
      <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
    </div>
      <h2 style="line-height: 88px;text-align: center;position: relative;bottom: 100px;">Polisi Penghantaran</h2>
      <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 0 1% 50px 2%;">
        <h2 style="font-size: 16px;line-height: 34px;">1. OUR SERVICES: ORDER, PAYMENT AND DELIVERY</h2>
        <h2 style="font-size: 16px;line-height: 34px;">1.1 Order</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.1.1</td><td class="list-content"> Services are only available to User and subject to our prescribed concierge fees, delivery and such other related charges and/or statutory tax. User are responsible for checking and ensuring the suitability, usefulness, quality, adequacy and availability of the products displayed at the Site for your personal use and if necessary or desired, you should seek and obtain advice from the appropriate party on the products before engaging the Services (“Order”).</td></tr>
          <tr><td class="list-bullet">1.1.2</td><td class="list-content"> You are required to provide us with correct information as required upon placing the Order including but not limited to payment information and warrant that the provided information is correct and complete.</td></tr>
          <tr><td class="list-bullet">1.1.3</td><td class="list-content"> All Order are subject to our acceptance without limitation to stock availability, geographically limits. We reserve the right to cancel, amend or reject the Order in whole or in part, at any time without any liability or compensation, if the product of the Order is damaged or spoilt, or unavailable for any reason. We may also, at our sole discretion, limit or cancel quantities of the products of the Order.</td></tr>
          <tr><td class="list-bullet">1.1.4</td><td class="list-content"> Once payment for the Order is being process, for technical reasons, you cannot cancel the Order save and except that the Order is rejected or cancelled by us or your written request for cancellation has been approved with our additional terms and conditions.</td></tr>
          <tr><td class="list-bullet">1.1.5</td><td class="list-content"> Any offer for any product or Services made on this Site is void when it is prohibited by law.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">1.2 Payment</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.2.1</td> <td class="list-content">Payment for Order and the products to be purchased through the Order (“Payment”) shall be made in Ringgit Malaysia (RM) and with the exact amount stipulated at the relevant pages or such relevant final confirmation section of the Order without any deductions.</td></tr>
          <tr><td class="list-bullet">1.2.2</td> <td class="list-content">Payment shall be made through credit cards, online banking services offered, processed and managed by a third-party payment gateway service provider, (“Payment Gateway”).</td></tr>
          <tr><td class="list-bullet">1.2.3</td> <td class="list-content">You are required to adhere to all the terms and conditions of the Payment Gateway and we are not responsible for the accuracy and authenticity of the information provided by you to the Payment Gateway. You agree and acknowledge that we shall not be liable and in no way be held responsible for any losses whatsoever, whether direct, indirect, incidental or consequential, including without limitation any losses due to any of your Payment processed by the Payment Gateway. Any dispute, complaint and/or dissatisfaction related to the Payment process shall be forwarded directly to the Payment Gateway.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">1.3 Delivery</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.3.1</td> <td class="list-content">We take great care to ensure that delivery of Order to your specify delivery address and Suppliers engaged third party delivery service provider to perform such deliveries or self-pick up from any location.</td></tr>
          <tr><td class="list-bullet">1.3.2</td> <td class="list-content">It is your responsibility to ensure the delivery details provided are correct and to ensure adequate arrangements in accepting the same. We shall not be held liable and responsible for any damage, cost or expense suffered or incurred by you for as a result of your failure or negligence in complying the above requirements.</td></tr>
          <tr><td class="list-bullet">1.3.3</td> <td class="list-content">You may contact our customer service if you have not received your Order in the next ten (10) business day or the prescribed delivery date of the products stipulated in the Display Info, we will facilitate the matter to find best solution on such circumstance In certain case of late delivery, we may, at our own discretion, to refund/cancel the relevant delivery charges within reasonable time stipulated by us.</td></tr>
          <tr><td class="list-bullet">1.3.4</td> <td class="list-content">All risk of loss and damage of the products shall pass to you upon delivered. If you fail, neglected and/or intentionally refuse to accept delivery of the Order without any valid reason acceptable by us, or we are unable to deliver the Order due to your failure in providing sufficient and appropriate instructions, Order shall be deemed to have been delivered to you together with the risk of the product.</td></tr>
          <tr><td class="list-bullet">1.3.5</td> <td class="list-content">In event that re-delivery is required due to no fault by us and/or requested by you, we may impose any relevant charges on the re-delivery, storage, insurance and any other cost or expense that we incurred for such re-delivery to you.</td></tr>
          <tr><td class="list-bullet">1.3.5</td> <td class="list-content">We reserve the rights to collect back from you for any additional/wrong product delivered.</td></tr>
          </table>
        </p>
        </div>
        <div style="width: 100%;height: 120px;padding-left: 20px;padding-top: 30px;background-color: rgb(32, 36, 42);position: relative;">
          <h2 @click="showPageNum = 6" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Terma dan Syarat</h2>
          <h2 @click="showPageNum = 7" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Privasi</h2>
          <h2 @click="showPageNum = 8" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Penghantaran</h2>
          <h2 @click="showPageNum = 9" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Pengembalian</h2>
        </div>
        <div style="width: 100%;height: 96px;padding-top: 20px;background-color: rgb(227,192,126);text-align: center;">
          <h2 style="font-size: 15px;line-height: 32px;">Customer Care Line: 603 2273 3082</h2>
          <h2 style="font-size: 15px;line-height: 32px;">Email: careline@evooil.com.my</h2>
        </div>
        <div class="company-info-div">
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Name:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.name}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Business Reg No:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.regNo}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Address</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.addr}}</p>
        </div>
    </div>
    <div v-show="showPageNum == 9" style="width: 100%">
     <div style="position: relative;text-align: center;">
      <img src="@/assets/img_dealer_registration_banner_m.jpg" style="width: 100%;"/>
    </div>
      <h2 style="line-height: 88px;text-align: center;position: relative;bottom: 100px;">Polisi Pengembalian</h2>
      <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 0 1% 50px 2%;">
        <h2 style="font-size: 16px;line-height: 34px;">1. REFUND AND RETURN POLICY</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">1.1</td><td class="list-content"> You are required to contact us through email <a href="mailto:newsletter@transparamount.com" style="color:blue;">newsletter@transparamount.com</a> or reach us at our hotline, <a href="tel:+603-79689988" style="color:blue;">+603-79689988</a> within twenty-four (24) hours should there be request of refund, return of products, discrepancies or any other dissatisfaction of products received (collectively refer to as “Feedback”). We will review your Feedback and to revert to you our decision to either refund, re-deliver the Order, to reject your request or such other recommendation by us within 14 business days from the date we receive your abovementioned request</td></tr>
          <tr><td class="list-bullet">1.2</td><td class="list-content"> Please note that refund and/or re-deliver of Order may only allow for the following situations and strictly subject to our sole discretion and further terms and condition which we may impose from time to time and on case-to-case basis:<br>
          <table>
            <tr><td class="list-bullet">(a)</td> <td class="list-content">product is not received; or</td></tr>
            <tr><td class="list-bullet">(b)</td> <td class="list-content">defective and/or damage product delivered; or</td></tr>
            <tr><td class="list-bullet">(c)</td> <td class="list-content">product delivered is materially different from the specification in the Display Info or product delivered in incorrect quantity; or</td></tr>
            <tr><td class="list-bullet">(d)</td> <td class="list-content">cancellation of Order by us due to product not available or due to any other reason beyond our control; or</td></tr>
            <tr><td class="list-bullet">(d)</td> <td class="list-content">cancellation of Order by you that we have expressly allowed.</td></tr>
          </table>
          </td></tr>
          <tr><td class="list-bullet">1.3</td><td class="list-content"> We reserve the rights to request evidence without limitation to photo evidence from you upon we received your Feedback and we may send our representative to verify the same, if necessary.</td></tr>
          <tr><td class="list-bullet">1.4</td><td class="list-content"> We reserve the rights to updates and/or amend the list of products which are non-refundable.</td></tr>
          <tr><td class="list-bullet">1.5</td><td class="list-content"> In event of return of product, you are required to ensure that the product, including any complimentary items such as accessories delivered together with the product, must be returned to us in the condition received by you on delivery. We highly recommend you to take a photo of the product upon receipt. For the avoidance of doubt, if the return of product are due to your request in the absence of any fault of our or the seller part, the relevant transportation fees shall be borne by you unless otherwise stipulated by us.</td></tr>
          </table>
        </p>
        <h2 style="font-size: 16px;line-height: 34px;">2. PRODUCT WARRANTY AND SERVICE</h2>
        <p style="font-size: 16px;">
          <table>
          <tr><td class="list-bullet">2.1</td> <td class="list-content">All product purchased from the Site may contains any warranty or guarantee, you acknowledge that it is your sole responsibility to seek for such warranty services or guarantee performance from the seller directly according to the information provided in the Display Info and we may assist you to reasonably communicate with the seller if needed. We do not warrant and undertake to responsible and/or assist you in seeking such warranties from the seller unless otherwise agreed by us in writing together with our terms and conditions to do so.</td></tr>
          </table><br>
          For the avoidance of doubt, all warranties (if any) are warranties undertake by the manufacturer or the seller, we do not take any responsibility for the said warranties unless otherwise provided by us.
        </p>
      </div>
      <div style="width: 100%;height: 120px;padding-left: 20px;padding-top: 30px;background-color: rgb(32, 36, 42);position: relative;">
        <h2 @click="showPageNum = 6" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Terma dan Syarat</h2>
        <h2 @click="showPageNum = 7" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Privasi</h2>
        <h2 @click="showPageNum = 8" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Penghantaran</h2>
        <h2 @click="showPageNum = 9" style="width: 50%;float: left;font-size: 15px;line-height: 36px;color: grey;">Polisi Pengembalian</h2>
      </div>
      <div style="width: 100%;height: 96px;padding-top: 20px;background-color: rgb(227,192,126);text-align: center;">
        <h2 style="font-size: 15px;line-height: 32px;">Customer Care Line: 603 2273 3082</h2>
        <h2 style="font-size: 15px;line-height: 32px;">Email: careline@evooil.com.my</h2>
      </div>
      <div class="company-info-div">
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Name:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.name}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Business Reg No:</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.regNo}}</p>
          <h2 class="company-info-header" style="font-size: 15px;line-height: 32px;">Company Address</h2>
          <p style="font-size: 15px;line-height: 32px;">{{companyInfo.addr}}</p>
        </div>
    </div>
    <el-dialog :visible.sync="showConfirmPayYear" style="text-align: center;" class="payment-dialog" :close-on-click-modal="false" @close="handleClose">
      <strong style="display: block;font-size: 21px;line-height: 66px;color: black;">Pembayaran Perniagaan</strong>
      <p style="color: black;">
        Sila melengkapkan pembayaran perniagaan sebelum mengguna sistem Evo Oil.
      </p>
      <FORM method="post" name="ePayment" ref="eePayment" action="https://payment.ipay88.com.my/ePayment/entry.asp">
        <INPUT type="hidden" name="MerchantCode" :value="payData.MerchantCode"/>
        <INPUT type="hidden" name="PaymentId" :value="payData.PaymentId" />
        <INPUT type="hidden" name="RefNo" :value="payData.RefNo" />
        <INPUT type="hidden" name="Amount" :value="payData.Amount" />
        <INPUT type="hidden" name="Currency" :value="payData.Currency" />
        <INPUT type="hidden" name="ProdDesc" :value="payData.ProdDesc" />
        <INPUT type="hidden" name="UserName" :value="payData.UserName" />
        <INPUT type="hidden" name="UserEmail" :value="payData.UserEmail" />
        <INPUT type="hidden" name="UserContact" :value="payData.UserContact" />
        <INPUT type="hidden" name="Remark" :value="payData.Remark" />
        <INPUT type="hidden" name="Lang" :value="payData.Lang" />
        <INPUT type="hidden" name="SignatureType" :value="payData.SignatureType" />
        <INPUT type="hidden" name="Signature" :value="payData.Signature" />
        <INPUT type="hidden" name="ResponseURL" :value="payData.ResponseURL" />
        <INPUT type="hidden" name="BackendURL" :value="payData.BackendURL" />
        <INPUT type="submit" value="ipay88" name="Submit" style="display: none;"/>
      </FORM>
      <el-button type="primary" style="margin: 30px 0 45px;" @click="payYearMent" :loading="ipayButtonLoading" :disabled="ipayButtonLoading">Bayar Sekarang</el-button>
    </el-dialog>
    <el-dialog :visible.sync="showSendEmailCode" style="text-align: center;" :fullscreen="true" :close-on-click-modal="false">
      <strong style="display: block;font-size: 21px;line-height: 66px;color: black;">Reset Kata Laluan</strong>

      <el-form label-position="top" :model="resetPassword" style="width: 92%;margin: 20px 4% 0 4%;padding: 10px 2% 3px 2%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
        <el-form-item label="Emel">
          <el-input v-model="resetPassword.email"  @blur="checkEmail($event.target.value)"></el-input>
        </el-form-item>
        <el-form-item label="Kod">
          <el-input v-model="resetPassword.code">
            <el-button v-if="codeShow" style="padding-right:10px" slot="suffix" type="text" @click="getEmailCode">Dapat Kod</el-button>
            <el-button v-if="!codeShow" style="padding-right:10px" slot="suffix" disabled type="text">Dapat Kod({{codeButtonCount}})</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="Kata Laluan Baru">
          <el-input v-model="resetPassword.newPwd" show-password type="password"></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" style="margin: 10px 0 88px 0;" @click="orderResetPasswodr">Hantar</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { accountTrim } from '@/utils/auth'
import { uploadFileApi, applayDealerApi, dealer_query_oneApi, registpayDealerApi, rePwdMailApi, forgetPwdApi } from '@/api/user'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      codeShow: true,
      codeButtonCount: 0,
      timer: null,
      ipayButtonLoading: false,
      showConfirmPayYear: false,
      showSendEmailCode: false,
      ismustConfirm: true,
      shopAddrMATCHbillingAddr: false,
      checked: false,
      showPageNum: 0, // 0原始 1登录/注册 2公司/个人 3公司注册 4个人注册 5登录
      fileList: [],
      fileListUB: [],
      fileListIC: [],
      fileListSSM: [],
      repwd: '',
      loginData: {},
      resetPassword: {},
      payData: {},
      unlessWord: '',
      fileData: new FormData(),
      fileDataUB: new FormData(),
      fileDataSSM: new FormData(),
      fileDataIC: new FormData(),
      newDealerData: {
        shopAddr: {},
        billingAddr: {}
      },
      emailPattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g,
      namePattern: /^[A-Za-z ]+$/g,
      phonePattern: /^[0-9\-]+$/g,
      alphanum: /^[A-Za-z0-9 ]+$/g,
      addressPattern: /^[A-Za-z0-9\.\-\(\)\,\/\ ]+$/g,
      postCodePattern: /^([0-9]{5})+$/g,
      icPattern: /^([0-9]{12})+$/g,
      companyInfo: {
        name: 'Trans Paramount Sdn Bhd',
        regNo: '726644-U',
        addr: 'No 65, Jalan 14/29, Seksyen 14, 46100 Petaling Jaya, Selangor'
      },
    }
  },
  mounted() {

  },
  methods: {
    showLoginOrRegist() {
      this.showPageNum = 1
    },
    accountTrim() {
      this.loginData.acc = accountTrim(this.loginData.acc)
    },
    changeMatch() {
      if (this.shopAddrMATCHbillingAddr) {
        this.newDealerData.billingAddr.region = this.newDealerData.shopAddr.region
        this.newDealerData.billingAddr.country = this.newDealerData.shopAddr.country
        this.newDealerData.billingAddr.name = this.newDealerData.shopAddr.name
        this.newDealerData.billingAddr.phoneNumber = this.newDealerData.shopAddr.phoneNumber
        this.newDealerData.billingAddr.streetAddress = this.newDealerData.shopAddr.streetAddress
        this.newDealerData.billingAddr.regionalAddress = this.newDealerData.shopAddr.regionalAddress
        this.newDealerData.billingAddr.city = this.newDealerData.shopAddr.city
        this.newDealerData.billingAddr.postCode = this.newDealerData.shopAddr.postCode
      } else {
        this.newDealerData.billingAddr = {}
      }
    },
    changeButtonTxt() {
      const TIMECOUNT = 60
      if (!this.timer) {
        this.codeButtonCount = TIMECOUNT
        this.codeShow = false
        this.timer = setInterval(() => {
          if (this.codeButtonCount > 0 && this.codeButtonCount <= TIMECOUNT) {
            this.codeButtonCount--
          } else {
            this.codeShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    getEmailCode() {
      if (this.resetPassword.email && this.resetPassword.email.length > 0) {
        this.changeButtonTxt()
        forgetPwdApi({
          email: this.resetPassword.email
        }).then((res) => {
          this.$message({
            message: 'Berjaya, sila tunggu',
            type: 'success'
          })
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message({
          message: 'Sila semak data',
          type: 'error'
        })
      }
    },
    checkPwdSame() {
      if (!(this.resetPassword.email && this.resetPassword.email.length > 0)) {
        return false
      }
      if (!(this.resetPassword.code && this.resetPassword.code.length > 0)) {
        return false
      }
      return (this.resetPassword.newPwd && this.resetPassword.code.length > 0)
    },
    checkEmail: function(email) {
      if (email && email !== '') {
        if (email.match(this.emailPattern)) {
          console.log('email ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan e-mel yang sah!',
        type: 'error'
      })
      console.log('email x')
      return false
    },
    checkName: function(name) {
      if (name && name !== '') {
        if (name.match(this.namePattern)) {
          console.log('name ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan nama yang sah',
        type: 'error'
      })
      console.log('name x')
      return false
    },
    checkCompanyRegNo: function(compRegNo) {
      if (compRegNo && compRegNo !== '') {
        if (compRegNo.match(this.alphanum)) {
          console.log('compreg ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan no pendaftaran syarikat yang sah!',
        type: 'error'
      })
      console.log('compreg x')
      return false
    },
    checkPhoneNo: function(phone) {
      if (phone && phone !== '') {
        if (phone.match(this.phonePattern)) {
          console.log('phone ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan no telefon yang betul!',
        type: 'error'
      })
      console.log('phone x')
      return false
    },
    checkIC: function(ic) {
      if (ic && ic !== '') {
        if (ic.match(this.icPattern)) {
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan no I/C yang sah!',
        type: 'error'
      })
      return false
    },
    checkMasterDealerCode: function(mdCode) {
      if (mdCode && mdCode !== '') {
        if (mdCode.match(this.alphanum)) {
          console.log('mdcode ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan kod dealer utama yang sah!',
        type: 'error'
      })
      console.log('mdcode x')
      return false
    },
    checkAddress: function(addr) {
      if (addr && addr !== '') {
        if (addr.match(this.addressPattern)) {
          console.log('addr1 ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan alamat 1 yang sah!',
        type: 'error'
      })
      console.log('addr1 x')
      return false
    },
    checkAddress2: function(addr2) {
      if (addr2 && addr2 !== '') {
        if (addr2.match(this.addressPattern)) {
          console.log('addr2 ok')
          return true
        }
      } else {
        console.log('addr2 ok')
        return true
      }
      this.$message({
        message: 'Sila masukkan alamat 2 yang sah!',
        type: 'error'
      })
      console.log('addr2 x')
      return false
    },
    checkPostCode: function(postcode) {
      if (postcode && postcode !== '') {
        if (postcode.match(this.postCodePattern)) {
          console.log('postcode ok')
          return true
        }
      }
      this.$message({
        message: 'Sila masukkan poskod yang sah!',
        type: 'error'
      })
      console.log('postcode x')
      return false
    },
    checkBusinessType: function(businessType) {
      if (businessType && businessType !== '') {
        console.log('busstype ok')
        return true
      }
      this.$message({
        message: 'Sila masukkan jenis perniagaan!',
        type: 'error'
      })
      console.log('busstpye x')
      return false
    },
    orderResetPasswodr() {
      if (!(this.checkPwdSame())) {
        this.$message({
          message: 'Kata Laluan baru tidak sama',
          type: 'error'
        })
        return false
      }
      rePwdMailApi(this.resetPassword).then((res) => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.showSendEmailCode = false
        this.showPageNum = 1
      }).catch(err => {
        console.log(err)
      })
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB!')
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('index', 0)
          this.fileData.append('num', 0)
          console.log(this.fileData)
          uploadFileApi(this.fileData).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.newDealerData.logoUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemove(file, fileList) {
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    uploadFileSSM(file) {
      this.fileDataSSM.append('mf', file.file)
    }, // 上传文件
    submitUploadSSM() {
      if (this.fileListSSM.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListSSM.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB!')
        } else {
          this.fileDataSSM = new FormData()
          this.$refs.uploadSSM.submit()
          this.fileDataSSM.append('index', 0)
          this.fileDataSSM.append('num', 0)
          console.log(this.fileDataSSM)
          uploadFileApi(this.fileDataSSM).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.newDealerData.certificateUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveSSM(file, fileList) {
      this.fileListSSM = fileList
    }, // 移除
    handleExceedSSM(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeSSM(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListSSM = fileList
      this.submitUploadSSM()
    }, // 监控上传文件列表
    uploadFileIC(file) {
      this.fileDataIC.append('mf', file.file)
    }, // 上传文件
    submitUploadIC() {
      if (this.fileListIC.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListIC.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB!')
        } else {
          this.fileDataIC = new FormData()
          this.$refs.uploadIC.submit()
          this.fileDataIC.append('index', 0)
          this.fileDataIC.append('num', 0)
          console.log(this.fileDataIC)
          uploadFileApi(this.fileDataIC).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.newDealerData.utilityBillUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveIC(file, fileList) {
      this.fileListIC = fileList
    }, // 移除
    handleExceedIC(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeIC(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListIC = fileList
      this.submitUploadIC()
    }, // 监控上传文件列表
    uploadFileUB(file) {
      this.fileDataUB.append('mf', file.file)
    }, // 上传文件
    submitUploadUB() {
      if (this.fileListUB.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileListUB.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB!')
        } else {
          this.fileDataUB = new FormData()
          this.$refs.uploadUB.submit()
          this.fileDataUB.append('index', 0)
          this.fileDataUB.append('num', 0)
          console.log(this.fileDataUB)
          uploadFileApi(this.fileDataUB).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.newDealerData.certificateUrl = response.data.picUrl[0]
          })
        }
      }
    }, // 上传到服务器
    handleRemoveUB(file, fileList) {
      this.fileListUB = fileList
    }, // 移除
    handleExceedUB(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChangeUB(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileListUB = fileList
      this.submitUploadUB()
    }, // 监控上传文件列表
    comRegist(type) {
      if (type == 1) {
        this.newDealerData.emailAddress = this.newDealerData.loginEmail
      }
      this.newDealerData.companyType = type
      this.newDealerData.newType = 0
      applayDealerApi(this.newDealerData).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.showPageNum = 0
      }).catch(err => {
        console.log(err)
      })
    },
    getIsNeedPay(roleType) {
      if (roleType == this.adminValue || roleType == this.agencyValue) {
        this.$router.push({ path: '/' })
        this.loading = false
      } else {
        dealer_query_oneApi().then((res) => {
          this.dealerData = res.data
          if (res.data.isPaid == 0) { // actual condition is ispaid != 1
            this.showConfirmPayYear = true
          } else {
            this.$router.push({ path: '/' })
            this.loading = false
          }
        }).catch(err => {
          this.$store.dispatch('user/logout')
          console.log(err)
        })
      }
    },
    payYearMent() {
      let _this = this
      this.ipayButtonLoading = true
      registpayDealerApi(this.dealerData).then((res) => {
        this.payData = res.data
        setTimeout(function() {
          _this.$refs.eePayment.submit()
        }, 233)
      }).catch(err => {
        console.log(err)
      })
    },
    handleLogin() {
      this.loading = true
      this.$store.dispatch('user/login', this.loginData).then((roleType) => {
        this.getIsNeedPay(roleType)
      }).catch(() => {
        this.loading = false
      })
    },
    handleClose(){
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-page-downform {
    .title-container {
      margin-bottom: 20px;
    }
  }
  table{
    line-height: 1.55;
    .list-bullet, .list-content{
      vertical-align: text-top;
    }
    .list-bullet{
      padding-right: 10px;
    }
    td{
      padding-bottom: 10px;
    }
  }
  .company-info-div{
    width: 100%;
    height: 260px;
    padding-top: 20px;
    padding-left: 24px;
    padding-bottom: 15px;
    background-color: rgb(32, 36, 42);
    color: grey;
    text-align: left;
    .company-info-header{
      color: white;
    }
  }
</style>
<style scoped>
  /deep/ .el-upload-list{
    width: 88px;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 60px;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  /deep/ .el-form-item .el-select{
   width: 92%;
  }
  /deep/ .el-form-item .el-input{
   width: 92%;
  }

  /deep/ .payment-dialog .el-dialog{
    width: 85% !important; 
  }
  
</style>
